<template>
  <div class="loading-wrapper">
    <div class="register-wrapper">
      <div id="register" style="background: rgba(240 , 240 , 240 ,0.7);">
        <p class="title">注册</p>
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="0"
          class="demo-ruleForm">
          <el-form-item prop="email">
            <el-input v-model="ruleForm2.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="code" class="code">
            <el-input v-model="ruleForm2.code" placeholder="验证码"></el-input>
            <el-button type="primary" :disabled='isDisabled' @click="sendCode">{{buttonText}}</el-button>
          </el-form-item>
          <el-form-item prop="sex">
            <el-radio v-model="ruleForm2.sex" label="1" border value="男">男</el-radio>
            <el-radio v-model="ruleForm2.sex" label="2" border value="女">女</el-radio>
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="ruleForm2.name" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item prop="age">
            <el-input v-model="ruleForm2.age" placeholder="年龄" type="number"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input v-model="ruleForm2.phone" placeholder="手机号" ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')" style="width:100%;">注册</el-button>
            <p class="login" @click="gotoLogin">已有账号？立即登录</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "register",
    data() {
      // <!--验证邮箱是否合法-->
      let checkEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入邮箱'))
        } else if (!this.checkEmail(value)) {
          callback(new Error('邮箱不合法'))
        } else {
          callback()
        }
      }
      let checkTel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!this.checkMobile(value)) {
          callback(new Error('手机号不合法'))
        } else {
          callback()
        }
      }
      //验证昵称
      let checkName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入昵称'))
        } else {
          callback()
        }
      }
      //  <!--验证码是否为空-->
      let checkSmscode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入邮箱验证码'))
        } else {
          callback()
        }
      }
      // <!--验证密码-->
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"))
        } else {
          if (this.ruleForm2.checkPass !== "") {
            this.$refs.ruleForm2.validateField("checkPass");
          }
          callback()
        }
      }
      // <!--二次验证密码-->
      let validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm2.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          password: "",
          checkPass: "",
          phone: "",
          sex:"",
          age:"",
          email:'',
          name:'',
          code: ""
        },
        rules2: {
          password: [{ validator: validatePass, trigger: 'change' }],
          checkPass: [{ validator: validatePass2, trigger: 'change' }],
          phone: [{ validator: checkTel, trigger: 'change' }],
          email:[{validator: checkEmail, trigger: 'change' }],
          code: [{ validator: checkSmscode, trigger: 'change' }],
          name:[{validator: checkName, trigger: 'change'}]
        },
        buttonText: '发送验证码',
        isDisabled: false, // 是否禁止点击发送验证码按钮
        flag: true
      }
    },
    methods: {
      // <!--发送验证码-->
      sendCode () {
        let email = this.ruleForm2.email
        if (this.checkEmail(email)) {
          //此处接后端发送验证码
          axios.post("/api/user/sendEmail",{email:email}).then(res=>{
            if (res.data.code==200){
              alert(res.data.mgs);
              console.log(email)
              let time = 60
              this.buttonText = '已发送'
              this.isDisabled = true
              if (this.flag) {
                this.flag = false;
                let timer = setInterval(() => {
                  time--;
                  this.buttonText = time + ' 秒'
                  if (time === 0) {
                    clearInterval(timer);
                    this.buttonText = '重新获取'
                    this.isDisabled = false
                    this.flag = true;
                  }
                }, 1000)
              }
            } else{
              alert(res.data.message);
            }
          })
        }
      },
      // <!--提交注册-->
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            //此处接后端注册
            axios.post("/api/user/registry",this.ruleForm2).then(res=>{
              if (res.data.code==200){
                alert(res.data.mgs);
                this.$router.push({path: '/login'});
              } else{
                alert(res.data.mgs);
              }
            })
          } else {
            console.log("提交失败!!");
            return false;
          }
        })
      },
      // <!--进入登录页-->
      gotoLogin() {
        this.$router.push({
          path: "/login"
        });
      },
      // 验证手机号
      checkMobile(str) {
        let re = /^1\d{10}$/
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      },
      // 验证邮箱
      checkEmail(str) {
        let re =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      }
    }
  };
</script>

<style scoped>
  .loading-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url("http://qom05wwz5.hd-bkt.clouddn.com/bg.jpg");
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .register-wrapper img {
    position: absolute;
    z-index: 1;
  }
  .register-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  #register {
    max-width: 340px;
    margin: 60px auto;
    background: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 9;
  }
  .title {
    font-size: 26px;
    line-height: 50px;
    font-weight: bold;
    margin: 10px;
    text-align: center;
  }
  .el-form-item {
    text-align: center;
  }
  .login {
    margin-top: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #1ab2ff;
    cursor: pointer;
    text-align: left;
    text-indent: 8px;
    width: 160px;
  }
  .login:hover {
    color: #2c2fd6;
  }
  .code >>> .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .code button {
    margin-left: 20px;
    width: 140px;
    text-align: center;
  }
  .el-button--primary:focus {
    background: #409EFF;
    border-color: #409EFF;
    color: #fff;
  }
</style>

